<template>
    <div>
        <!--编辑推荐-->
        <div class="EditorChoice">
            <div></div>
            <div>编辑推荐</div>
        </div> 

        <div class="songsList">
            
            <div class="songList-item" v-for="(item,index) in songlist" :key="index">
                <div class="songList-item-count"><img class="countpic" src="../assets/2.png" alt="">{{item.playCount}}万</div>
                <div class="songList-item-pic">
                <img :src="item.picUrl" alt="">
            </div>
            <div class="songList-item-title">{{item.name}}</div>
            </div>
        </div>

        <div class="EditorChoice">
            <div></div>
            <div>最新音乐</div>
        </div> 

        <!--歌曲列表-->
        <div class="list-box">
            <div class="list" v-for="(item,index) in newSongs" :key="index">
                <div class="list-desc">
                    <div class="list-desc-top">{{item.name}}</div>
                    <div class="list-desc-bottom-box">
                        <div></div>
                        <div class="list-desc-bottom">{{item.song.artists[0].name}} - {{item.song.album.name}}</div>
                    </div>
                </div>
                <div @click="getId(item)">
                    <div v-show="item.isplay" class="play">
                        <img src="../assets/下载.gif" alt="">
                    </div>
                    <div v-show="!item.isplay" class="list-icon"></div>
                </div>
            </div>
            <audio ref="audio" autoplay :src="`https://music.163.com/song/media/outer/url?id=${url}.mp3`"></audio>
        </div>
    </div>
</template>

<script>
    export default {
        name:"Home",
        data(){
            return{
                //存放推荐歌单数据
                songlist: [],
                //存放最新音乐
                newSongs:[],
                url:""
            };
        },
        created(){
            this.getsongList();
            this.getNewSongs()
        },
        methods:{
            //获取音乐id
            getId(e){
                this.newSongs.forEach((item)=>{
                    item.isplay=false
                })
                let p = this.$refs.audio
                e.isplay=!e.isplay
                if(this.url==e.id){
                    if(p.paused){
                        p.play()
                        return
                    }
                    e.isplay=!e.isplay
                    p.pause();
                    return
                }
                console.log(e);
                this.url=e.id
                p.play()
            },
            //获取编辑推荐的数据
            getsongList(){
                //发去axios请求
                this.axios({
                    //请求方式 get post
                    method: "get",
                    //请求路径
                    url:"https://apis.netstart.cn/music/personalized",
                    //参数
                    params:{
                        limit:6,
                    },
                })
                    .then((res)=>{
                        res.data.result.forEach((item) => {
                            console.log("处理之前的数据==>",item.playCount);
                            //保留一位小数
                            item.playCount = (item.playCount / 10000).toFixed(1)
                            console.log("这是保留一位小数的数字==>",item.playCount);
                            //字符串切割
                            let a = (item.playCount).split(".")
                            console.log("这是切割之后的数字==>",a[1]);
                            if(a[1]==0){
                                item.playCount=a[0]
                                return
                            }
                        });
                        
                        //赋值
                        this.songlist = res.data.result;
                        //请求成功打印的数据
                        console.log("这是我们需要的数据==>",this.songlist);
                    })
                    .catch((err) => {
                        //请求失败
                        console.log(err);
                    });
            },
            //获取最新音乐
            getNewSongs(){
                this.axios({
                    methods:"get",
                    url:"https://apis.netstart.cn/music/personalized/newsong"
                }).then((res)=>{
                    res.data.result.forEach((item)=>{
                        item.isplay=false;
                    })
                    this.newSongs=res.data.result
                    console.log("最新音乐数据==>",res.data.result);
                })
            }
        },
    };
</script>

<style lang="less" scoped>
.list-desc-top{
    font-size: 16px;
}
.play{
    width: 22px;
    height: 22px;
    img{
        width: 100%;
    }
}
.list-desc-bottom{
    margin-left: 10px;
}
.list-desc-bottom-box{
    display: flex;
    align-items: center;
    justify-content:space-between;

}
.list-desc-bottom-box div:nth-child(1){
    // margin-top: 4px;
    width: 10px;
    height: 10px;
    background: url('../assets/3.png') no-repeat 0 0;
	background-size: 166px 97px;
	width: 12px;
	height: 8px;
    align-items: center;
}
.list-icon{
	background: url('../assets/3.png') no-repeat -24px 0;
	background-size: 166px 97px;
	width: 22px;
	height: 22px;
}
.list{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 10px;
    padding: 5px 10px 10px 0;
    border-bottom: 1px solid #cccccc;
}
.songsList{
    display: flex;
    flex-wrap: wrap;
    .songList-item{
        width: 33.3%;
        padding: 0 1px;
        box-sizing: border-box;
        .songList-item-pic{
            img{
                width: 100%;
            }
        }
        .songList-item-title{
            display: -webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow: hidden;
            padding: 6px 2px 0 6px
        }
        .songList-item-count{
            position: relative;
            text-align: right;
            top: 16px;
            color: white;
        }
        .countpic{
            width: 10px;
            color: white;
        }
        .songList-item-couuntpic img{
            position: relative;
            text-align: right;
            top: 27px;
            width: 20px;
            height: 20px;
        }
    }
}
.EditorChoice{
    display: flex;
    font-size: 16px;
    align-items: center;
    padding: 10px 0;
}
.EditorChoice div:nth-child(1){
    background-color: red;
    width: 2px;
    height: 16px;
    margin-right: 8px;
}
</style>